<template>
  <div class="room-list-setting">
    <el-breadcrumb>
      <el-breadcrumb-item>房型管理</el-breadcrumb-item>
      <el-breadcrumb-item>售卖房型管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="room-list-content">
      <el-form :inline="true">
        <el-form-item>
          <el-dropdown @command="setState"
            style="margin-left:15px">
            <span class="el-dropdown-link">
              {{stateTitle}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ 'key' : 'time', value: '', title: '全部状态' }">全部状态</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '1', title: '未上线' }">未上线</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '0', title: '已上线' }">已上线</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setType"
            style="margin-left:15px">
            <span class="el-dropdown-link">
              {{typeTitle}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ 'key' : 'time', value: '', title: '全部房型' }">全部房型</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '1', title: '全日房' }">全日房</el-dropdown-item>
              <el-dropdown-item :command="{ 'key' : 'time', value: '2', title: '钟点房' }">钟点房</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <!-- 酒店搜索 -->
          <!-- <el-select></el-select> -->
          <el-select v-model="HotelName"
            @change="changeHotel">
            <el-option v-for="(item,index) in HoteltableData"
              :key="index"
              :value="item.id"
              :label="item.name"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div class="suppliers-infromation">
        <div class="tab-pane">
          <PropertyManagement :dataTable="InventoryData" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getSaleHotelNames,
  getProductQuery,
  getSuppliersNameList
} from "../../../public/js/saleRoom";
const Breadcrumb = () => import("@/components/common/Breadcrumb");
const InventoryManagement = () =>
  import("@/components/room/room_list/InventoryManagement");
const PropertyManagement = () =>
  import("@/components/room/room_list/PropertyManagement");
const cityData = require("@/data/cities.json");
export default {
  data() {
    return {
      stateTitle: "全部状态",
      typeTitle: "全部房型",
      status: "",
      currentName: "first",
      carouselShow: true,
      cities: cityData.provincesEntities,
      suppliersValue: "",
      item: "",
      HotelTotal: 0,
      HotelName: "",
      RoomTotal: 0,
      props: {
        value: "label",
        children: "cities"
      },
      content: {
        firstTitle: "房型",
        secondTitle: "房型列表",
        type: "close"
      },
      showDepartment: false,
      ruleForm: {
        name: "",
        superior: ""
      },
      suppliers: [],
      HoteltableData: [],
      HotelCurrentPage: 1,
      HotelPageSize: 16,
      RoomValue: {
        startDate: window.commo.time(),
        pageSize: 10,
        pageNum: 1,
        limitDays: 7
      },
      saleHotelId: null,
      supplierId: "",
      searchKey: "",
      city: null,
      timeState: 1,
      hotelid: "",
      windowStyle: false,
      InventoryData: [],
      newInventoryData: [],
      type: ""
    };
  },
  created() {
    this.getSalseHotelNamesAll();
  },
  mounted() {
    window.bus.$on("starDate", res => {
      this.RoomValue.startDate = res;
    });
    window.bus.$on("limitDays", res => {
      this.RoomValue.limitDays = res;
    });
  },
  watch: {
    newInventoryData: {
      handler(val) {
        this.InventoryData = val;
      },
      deep: true
    }
  },
  methods: {
    setState(status) {
      this.stateTitle = status.title;
      this.status = status.value;

      this.requestHotelData();
    },
    setType(type) {
      this.typeTitle = type.title;
      this.type = type.value;
      this.requestHotelData();
    },
    changeHotel(hotelId) {
      this.hotelid = hotelId;
      this.requestHotelData();
    },
    getSalseHotelNamesAll() {
      getSaleHotelNames().then(res => {
        this.HoteltableData = res.data.list;
        if (res.data.list) {
          if (res.data.list.length > 0) {
            this.hotelid = res.data.list[0].id;
            this.HotelName = res.data.list[0].id;
            this.requestHotelData();
          }
        }
      });
    },
    searchHotel() {
      this.getSalseHotelNamesAll();
    },
    handleCascader(val) {
      this.city = parseInt(val[val.length - 1]);
      this.getSalseHotelNamesAll();
    },
    sendDatas(data) {
      this.InventoryData = data.staticRoomEntities;
      window.bus.$emit("SaleInformation", {
        saleHotelId: this.RoomValue.saleHotelId,
        supplierId: this.RoomValue.supplierId,
        total: data.total,
        windowStyle: this.windowStyle,
        limitDays: this.RoomValue.limitDays,
        status: this.status,
        type: this.type
      });
    },
    supplierChange(val) {
      new Promise((resolve, reject) => {
        resolve(
          this.suppliers.forEach((key, index) => {
            if (key.name === val) this.RoomValue.supplierId = key.id;
          })
        );
      }).then(() => {
        getProductQuery(this.RoomValue).then(res => {
          if (res.data.errCode === 0) {
            window.bus.$emit("pricePermissions", res.data.isLowerLevel);
            this.sendDatas(res.data);
          }
        });
      });
    },
    requestHotelData() {
      this.saleHotelId = this.hotelid;
      this.RoomValue.saleHotelId = this.hotelid;
      getSuppliersNameList(this)
        .then(res => {
          return res.data;
        })
        .then(res => {
          if (res.supplierNames[0].id)
            this.RoomValue.supplierId = res.supplierNames[0].id;
          this.RoomValue.status = this.status;
          this.RoomValue.type = this.type;
          this.suppliers = res.supplierNames;
          this.suppliersValue = res.supplierNames[0].name;
          getProductQuery(this.RoomValue).then(res => {
            if (res.data.errCode === 0) {
              window.bus.$emit("pricePermissions", res.data.isLowerLevel);
              this.sendDatas(res.data);
            }
          });
        });
    },
    hotelInformation(event, index, value) {
      this.$refs.itemList.forEach(item => {
        item.classList.remove("item-active");
      });
      event.target.classList.add("item-active");
      this.requestHotelData(this.HoteltableData[index].id);
      this.HotelName = value.name;
    },
    show() {
      this.carouselShow
        ? (this.carouselShow = false)
        : (this.carouselShow = true);
    },
    handleClick() {
      getProductQuery(this.RoomValue).then(res => {
        if (res.data.errCode === 0) {
          window.bus.$emit("pricePermissions", res.data.isLowerLevel);
          this.sendDatas(res.data);
        }
      });
    }
  },
  components: {
    Breadcrumb,
    InventoryManagement,
    PropertyManagement
  }
};
</script>
<style lang="scss">
.room-list-content {
  background-color: white;
  padding: 20px;
  position: relative;
  font-size: 12px;
  color: #415161;
}
</style>
